<template>
    <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
    <a-button type="primary" @click="addForm = true"  v-modulePerm="['bolList:download']">下载BOL</a-button>
    <common-table
        :columns="columns"
        :dataSource="dataList"
        v-model:localPagination="page"
        @paginationChange="onPageChange"
        v-model:loading="loading"
        :rowKey="(record) => record.shippingItem.ycReference"
        :scroll="{ x: 1000}"
        :slots="['expandedRowRender','action','shipFromItem','pickUpItem','shippingItem','shipToItem']"
        @expand="handleExpandedRowsChange"
    >
      <template #expandedRowRender="{ record }">
        <expand-bol :ref="`expandBol-${record.shippingItem.ycReference}`" :ycReference="record.shippingItem.ycReference"></expand-bol>
<!--        <expand-cloud :ref="`expandCloud-${record.productSku}`" :productSku="record.productSku" />-->
      </template>
      <template #shipFromItem="{ record }">
        <p style="font-weight: bold">Name:<span style="font-weight: normal">{{record.shipFromItem.shipFromName}}</span></p>
        <p style="font-weight: bold">Address:<span style="font-weight: normal">{{record.shipFromItem.shipFromAddress}}</span></p>
        <p style="font-weight: bold">City/State/Zip:<span style="font-weight: normal">{{record.shipFromItem.shipFromCityStateZip}}</span></p>
        <p style="font-weight: bold">Contact:<span style="font-weight: normal">{{record.shipFromItem.shipFromContact}}</span></p>
      </template>
      <template #pickUpItem="{ record }">
        <p style="font-weight: bold">Carrier:<span style="font-weight: normal">{{record.pickUpItem.carrier}}</span></p>
        <p style="font-weight: bold">Contact:<span style="font-weight: normal">{{record.pickUpItem.contact}}</span></p>
        <p style="font-weight: bold">E-mail:<span style="font-weight: normal">{{record.pickUpItem.email}}</span></p>
      </template>
      <template #shipToItem="{ record }">
        <p style="font-weight: bold">Name:<span style="font-weight: normal">{{record.shipToItem.shipToName}}</span></p>
        <p style="font-weight: bold">Address:<span style="font-weight: normal">{{record.shipToItem.shipToAddress}}</span></p>
        <p style="font-weight: bold">City/State/Zip:<span style="font-weight: normal">{{record.shipToItem.shipToCityStateZip}}</span></p>
      </template>
      <template #shippingItem="{ record }">
        <p style="font-weight: bold">仓库:<span style="font-weight: normal">{{record.shippingItem.warehouseReference}}</span></p>
        <p style="font-weight: bold">易仓:<span style="font-weight: normal">{{record.shippingItem.ycReference}}</span></p>
      </template>
      <template #action="{ record }">
        <a @click="downLoad(record)">下载</a>
      </template>
    </common-table>
    <add-form :form-item="formItem" :rules="rules" :add-form="addForm" :ref="addFormRef" @submit="submit" @close="close"/>
</template>
<script>
export default {
  name:"tail-bolList"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {nextTick, ref, onMounted,getCurrentInstance} from "vue";
import ExpandBol from "./components/expandBol.vue";
import {postFile} from "@utils/service/index.js";
import {message} from "ant-design-vue";
import AddForm from "@/views/tail/components/addForm.vue";
import {getBolList, getCarrierList} from "@/api/tail/bolList.js";
const columns = [
  {
    title: "发货信息",
    dataIndex: "shipFromItem",
    key: "shipFromItem",
    align: 'left',
  },
  {
    title: "提货信息",
    dataIndex: "pickUpItem",
    key: "pickUpItem",
    align: 'left'
  },
  {
    title: '收货信息',
    dataIndex: 'shipToItem',
    key: 'shipToItem',
    align: 'left'
  },
  {
    title: '提货日期',
    dataIndex: 'pickUpDate',
    key: 'pickUpDate',
    align: 'left'
  },
  {
    title: '出库单号',
    dataIndex: 'shippingItem',
    key: 'shippingItem',
    align: 'left'
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    width:80,
    align: "center"
  }
];
const carrierList = ref([]);
const {proxy} = getCurrentInstance();
const formItems = ref([
  {
    label: '易仓单号',
    field: 'ycReference',
    type: 'input',
  },
]);
const formItem = ref([
  {
    label:'预填值',
    value:'select',
    type:'select',
    options:[]
  },
  {
    label: '易仓单号',
    value: 'ycReference',
    type: 'input',
  },
  {
    label: '搬运人',
    value: 'carrier',
    type: 'input',
  },
  {
    label: '联系方式',
    value: 'contact',
    type: 'input',
  },
  {
    label: '邮箱',
    value: 'email',
    type: 'input',
  },
  {
    label: '姓名',
    value: 'shipToName',
    type: 'input',
  },
  {
    label: '地址',
    value: 'shipToAddress',
    type: 'input',
  },
  {
    label: '城市/州/邮编',
    value: 'shipToCityStateZip',
    type: 'input',
  },
  {
    label: '提货日期',
    value: 'pickUp',
    type: 'date',
  },
  {
    label: '仓库服务号',
    value: 'warehouseReference',
    type: 'input',
  },
]);
const exportLoading = ref(false);
const addForm = ref(false);
const addFormRef = ref();
const rules = {
  ycReference:[
    {
      required: true,
      message: '请输入易仓单号',
      trigger: 'blur'
    }
  ],
  carrier:[
    {
      required: true,
      message: '请输入搬运人',
      trigger: 'blur'
    }
  ],
  contact:[
    {
      required: true,
      message: '请输入联系方式',
      trigger: 'blur'
    }
  ],
  email:[
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    }
  ],
  shipToName:[
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  pickUp:[
    {
      required: true,
      message: '请选择提货日期',
      trigger: 'change'
    }
  ],
}
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getBolList,
  queryFactory: () => ({
  })
});
/**
 * 展开行
 * @param flag
 * @param record
 */
const handleExpandedRowsChange = (flag,record) => {
  if(flag){
    nextTick(()=>{
      proxy.$refs[`expandBol-${record.shippingItem.ycReference}`].init()
    })
  }
}

const submit = async (form) => {
  try{
    for (let formKey in form) {
      if(form[formKey] === undefined || form[formKey] === null){
        form[formKey] = ''
      }
    }
    const res = await postFile('/ofc/wms/bol/download','post',form,`${form.ycReference}.xlsx`)
    close()
    message.success('导出成功！')
  }catch (e){
    message.error(e);
  }
}
const close = () => {
  addForm.value = false;
}
const downLoad = async (record) => {
  try{
    console.log(record)
    let obj = {
      ycReference: record.shippingItem.ycReference
    }
    exportLoading.value = true;
    const res = await postFile('/ofc/wms/bol/download/from/db','get',obj,`${record.shippingItem.ycReference}.xlsx`)
    message.success('导出成功！')
  }catch (e){
    message.error(e);
  }finally {
    exportLoading.value = false;
  }
}
onMounted(() => {
  getCarrierList().then(res => {
    formItem.value[0].options = res.result.records.map(item => {
      return {
        ...item,
        label: item.carrier + "|" + item.carrierCode,
        value:`${item.carrier}-${ item.carrierCode }`
      }
    })
  })
})
</script>
<style scoped>

</style>
